import React, { createContext, useContext, useState } from 'react';
 
// 创建一个 Context，默认值为 'light'
const ThemeContext = createContext('light');
const UserContext = createContext('lss');
function Theme() {
//  let theme = 'dark';
// 使用普通变量，改变变量时，是无法触发页面渲染
  const [theme, setTheme] = useState('dark');
  const [user, setUser] = useState('lss');
  return (
    <ThemeContext.Provider value={theme}> {/* 提供共享的 theme 值 */}
    <UserContext.Provider value={user}> {/* 提供共享的 user 值 */}
      <div>
          <button onClick={() => {
              setTheme(theme === 'light' ? 'dark' : 'light');
              setUser(user === 'lss' ? 'tbb' : 'lss')
            }}>
            切换主题
          </button>
          <ComponentA />
          <ComponentB />
        </div>

    </UserContext.Provider>

    </ThemeContext.Provider>
  );
}
 
function ComponentA() {
    // 使用 useContext 获取当前 theme 值
    const theme = useContext(ThemeContext);
    const user = useContext(UserContext);
    return <div style={{ background: theme === 'dark' ? 'black' : 'white',color: theme === 'dark' ? 'white' : 'black' }}>{user}, 组件A,使用主题：{theme}</div>;
}
function ComponentB() {
    // 使用 useContext 获取当前 theme 值
    const theme = useContext(ThemeContext);
    const user = useContext(UserContext);
    return <div style={{ background: theme === 'dark' ? 'black' : 'white',color: theme === 'dark' ? 'white' : 'black' }}>{user}, 组件B,使用主题：{theme}</div>;
}
export default Theme;
 